<template>
  <div>
    <a-space>
      <a-button
        :type="button.type"
        v-for="(button, index) in buttons"
        :key="index"
        @click="click(button.method)"
      >
        <a-icon :type="button.icon" :theme="button.theme" />
        {{ button.name }}</a-button
      >

      <a-dropdown v-if="mores.length > 0">
        <a-menu slot="overlay">
          <a-menu-item
            @click="click(button.method)"
            v-for="(button, index) in mores"
            :key="index"
          >
            <a-icon :type="button.icon" :theme="button.theme" />
            {{ button.name }}
          </a-menu-item>
        </a-menu>
        <a-button v-show="mores.length > 0">
          更多 <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </a-space>
  </div>
</template>

<script>
import { menubutton } from "@/services/common/usercontrol/toolbar";
export default {
  name: "eip-toolbar",
  data() {
    return {
      buttons: [],
      mores: [],
    };
  },
  props: {
    option: {
      type: Object,
    },
  },
  created() {
    this.init();
  },
  methods: {
    /**
     * 按钮初始化
     */
    init() {
      let _this = this;
      const route = this.$route;
      menubutton({ path: route.path }).then((result) => {
        for (let index = 0; index < result.length; index++) {
          const element = result[index];
          if (index < 6) {
            _this.buttons.push(element);
          } else {
            _this.mores.push(element);
          }
        }
        //触发加载完毕事件
        this.$emit("onload", result);
      });
    },

    /**
     * 点击触发
     */
    click(method) {
      this.$emit(method);
    },
  },
};
</script>

<style lang="less" scoped></style>
